<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 500px;
            height: 90px;
        }
    </style>
    <script>
        function f() {
            var arr = document.getElementsByClassName('a');
            var crr = new Array(),small = arr[0];
            for (var i = 1; i < arr.length; i++) {
                if (small.innerText.split("\t")[0]>arr[i].innerText.split("\t")[0]){
                    small = arr[i];
                }
            }
            crr.push(small);
            var num = crr.length+1;
            o:while (true){
                for (var i1 = 0; i1 < arr.length; i1++) {
                    if (arr[i1].innerText.split("\t")[0]==num){
                        crr.push(arr[i1]);
                        num++;
                        if (num==arr.length+1){
                            break o;
                        }
                    }
                }
            }
            document.getElementById('bg').innerHTML = "<th>ID</th>\n" +
                "        <th>姓名</th>\n" +
                "        <th>年龄</th>\n" +
                "        <th>操作</th>";
            for (var i2 = 0; i2 < crr.length; i2++) {
                document.getElementById('bg').innerHTML += "<tr>"+crr[i2].innerHTML+"</tr>"
            }
            document.getElementById('px').onclick = "";
        }
    </script>
</head>
<body>
    <button onclick="f()" id="px">排序</button>
    <br>
    <input type="text" placeholder="请输入你要搜索的姓名..." id="ss"><button style="margin-left: 3px">搜索</button>
    <br>
    <br>
    姓名:<input type="text" id="xm">年龄:<input type="text" id="nl"><button style="margin-left: 3px">添加</button>
    <br>
    <table border="1" cellspacing="2" cellpadding="1" id="bg">
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
        <tr class="a">
            <td>2</td>
            <td >张三</td>
            <td>23</td>
        </tr>
        <tr class="a">
            <td>6</td>
            <td>王四</td>
            <td>24</td>
        </tr>
        <tr class="a">
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
        </tr>
        <tr class="a">
            <td>5</td>
            <td>张伟</td>
            <td>24</td>
        </tr>
        <tr class="a">
            <td>3</td>
            <td>李四</td>
            <td>28</td>
        </tr>
        <tr class="a">
            <td>4</td>
            <td>王五</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>